<template>
  <div>
    <header onclick="history.go(-1)">
      <img :src="require('../assets/return.png')" alt="" />
    </header>
    <div id="banner">
      <img :src="path + item.img" alt="" />
    </div>
    <article>
      <h1>{{ item.title }}</h1>
      <p>
        <span
          >分类：<span id="news_type">{{ item.name }}</span></span
        >
        <span
          >发布日期：<span id="time">{{ item.time }}</span></span
        >
      </p>
      <hr />
      <div id="content" v-html="item.content">
        <p></p>
      </div>
    </article>
  </div>
</template>

<script>
import axios from "axios";

import { mapState } from "vuex";
import { newsDetail , newsDetailMock } from "@/api";
export default {
  name: "newsdetail",
  data() {
    return {
      item: {},
    };
  },
  computed: {
    ...mapState({
      path: (state) => state.path,
    }),
  },
  methods: {},
  created() {
    newsDetailMock({id: this.$route.params.id})
    .then((res) => {
      console.log(res);
      this.item = res.data;
    }).catch(error=>{
      console.log(error);
    });
    // newsDetail({ id: this.$route.params.id })
    // .then((res) => {
    //   console.log(res);
    //   this.item = res.data;
    // }).catch(error=>{
    //   console.log(error);
    // });
    // axios
    //   .get("/mock/newsDetail")
    //   .then((response) => {
    //     // handle success
    //     console.log(response);
    //     this.item = response.data.data;
    //   })
    //   .catch((error) => {
    //     // handle error
    //     console.log(error);
    //   });

    // axios
    //   .get("/api/newsdetail.php?id=" + this.$route.params.id)
    //   .then((response) => {
    //     // handle success
    //     console.log(response);
    //     this.item = response.data.data;
    //   })
    //   .catch((error) => {
    //     // handle error
    //     console.log(error);
    //   });
  },
};
</script>


<style  scoped>
header {
  position: fixed;
  top: 5px;
  left: 5px;
  background: #000001;
  padding: 10px;
  border-radius: 50%;
}

header img {
  width: 30px;
  height: 30px;
}

#banner img {
  width: 100%;
}

article p > span:last-child {
  float: right;
}
</style>